import React from 'react'
import './ShowCoupon.less'
function ShowCoupon(props) {
    let arr = ["未使用", "已使用", "已失效"]
    let { listShow,n,setN } = props
    return (
        <div className="cou_show">
            <div className="nav">
                <ul>
                    {
                        arr.map((item, index) => {
                            return <li key={item} className={index === n ? "select" : ''} onClick={()=>setN(index)}>{item}</li>
                        })
                    }
                </ul>
            </div>
            {
                listShow.map((item, index) => {
                    return (
                        <div className="coupon" key={item.id}>
                            <div className="coupon_top">
                                <div className="cou_left">
                                    <div><span>￥</span>{item.money}</div>
                                    <span>满{item.limit_money}可用</span>
                                </div>
                                <div className="cou_right">
                                    <h4> {item.title}</h4>
                                    <span>{new Date(Number(item.begintime)).toLocaleDateString()}至{new Date(Number(item.endtime)).toLocaleDateString()}</span>
                                </div>
                                <div>

                                </div>
                            </div>
                            <p className="coupon_bottom">
                                使用规则:{item.description}
                            </p>
                        </div>
                    )
                })
            }

        </div>
    )
}
export default React.memo(ShowCoupon)
